import React, { useState, useEffect } from 'react'
import { View, Image } from '@tarojs/components'
import cls from 'classnames'
import { isDef } from '@/utils/utils'
import { Loading } from '../Loading';
import { Icon } from '../Icon';
// import { Icon } from '../Icon';

import './index.scss'

export const FIT_MODE_MAP = {
    none: 'center',
    fill: 'scaleToFill',
    cover: 'aspectFill',
    contain: 'aspectFit',
    widthFix: 'widthFix',
    heightFix: 'heightFix',
};

export interface ImageProps {
    round?: boolean
    src: string
    width?: number
    height?: number
    radius?: string
    lazyLoad?: boolean
    // useErrorSlot?: boolean
    // useLoadingSlot?: boolean
    showMenuByLongpress?: boolean
    fit?: string
    showError?: boolean
    showLoading?: boolean
    onLoad?: () => void
    onError?: () => void
    errorRender?: ()=> React.ReactElement
    loadingReader?: ()=> React.ReactElement 


}



export const ImageEle: React.FC<ImageProps> = ({
    round = false,
    width,
    height,
    radius,
    fit = 'fill',
    ...rest
}) => {

    const [error, setError] = useState<boolean>(false)
    const [loading, setLoading] = useState<boolean>(true)
    // const [mode]
    const [style, setStyle] = useState<React.CSSProperties>()


    useEffect(() => {
        const stl = Object.assign({}, style)
        if (isDef(width)) {
            stl.width = `${width}px`
        }
        if (isDef(height)) {
            stl.height = `${height}px`
        }
        if (isDef(radius)) {
            stl.borderRadius = radius
            stl.overflow = 'hidden'
        }
        setStyle(stl)
    }, [width, height, radius])


    return (
        <View className={
            cls('xxm-image-ls', {
                'xxm-image-ls--round': round
            })}
            style={{...style}}
        >
            {!error && <Image
                mode={FIT_MODE_MAP[fit]}
                src={rest.src}
                lazyLoad={rest.lazyLoad}
                className="xxm-image-ls__img"
                showMenuByLongpress={rest.showMenuByLongpress}
                
                onError={() => {
                    setLoading(false)
                    setError(true)
                    rest.onError && rest.onError()
                }}
                onLoad={() => {
                    setLoading(false)
                    rest.onLoad && rest.onLoad()
                }}
            />
            }

            {
                loading&& rest.showLoading &&
                <View className="xxm-image-ls__loading">
                   {rest.loadingReader && rest.loadingReader()}
                   <Loading size={16}  />
                </View>
            }
            {
                error && rest.showError &&
                <View className="xxm-image-ls__error">
                    {rest.errorRender && rest.errorRender()}
                    <Icon name="close" size={20} color="#f00" />
                </View>
            }
        </View>

    )
}
